<template>
  <div class="activity-card">
    <div class="header">
      <span>营地成员情况</span>
    </div>
    <div class="statistics-row">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">自有营地</span>
          <span class="number">{{ activityCount.toLocaleString() }}</span>
        </div>
      </div>
      <div class="info">
        <span class="unit-line1"></span>
        <div class="text">
          <span class="unit">租赁营地</span>
          <span class="number">{{ participantCount.toLocaleString() }}</span>
        </div>
      </div>
    </div>
    <div style="display: flex;width:100%">
      <div id="Chart2" style="height: 160px;width:50%"></div>
      <div id="Chart3" style="height: 160px;width:50%;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      activityCount: 20000,
      participantCount: 20000
    };
  },

  mounted() {
    this.datalist();
    this.initChart();
  },

  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("Chart3"));

      // 指定图表的配置项和数据
      let current = 25; // 当前用量
      let all = 100; // 总量
      var option;
      option = {
        title: {
          text: "50%",
          left: "center",
          top: "43%",
          textStyle: {
            fontSize: 13,
            color: "#0F0F0F"
          }
        },
        series: [
          {
            type: "pie",
            label: {
              show: false
            },
            center: ["50%", "50%"],
            radius: ["50%", "60%"],
            startAngle: 230,
            data: [
              {
                name: "用量",
                value: current,
                itemStyle: {
                  color: "#41B776"
                }
              },
              {
                name: "rest", // 实际显示部分是总量-用量
                value: all - current,
                itemStyle: {
                  color: "rgba(129,129,129,0.15)"
                }
              },
              {
                name: "bottom",
                value: 30,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;

          myChart.resize();
        }
      });
      ro.observe(Chart3);
    },
    datalist() {
      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("Chart2"));

      // 指定图表的配置项和数据
      let current = 25; // 当前用量
      let all = 100; // 总量
      var option;
      option = {
        title: {
          text: "50%",
          left: "center",
          top: "43%",
          textStyle: {
            fontSize: 13,
            color: "#0F0F0F"
          }
        },
        series: [
          {
            type: "pie",
            label: {
              show: false
            },
            center: ["50%", "50%"],
            radius: ["50%", "60%"],
            startAngle: 230,
            data: [
              {
                name: "用量",
                value: current,
                itemStyle: {
                  color: "#4E88F5"
                }
              },
              {
                name: "rest", // 实际显示部分是总量-用量
                value: all - current,
                itemStyle: {
                  color: "rgba(129,129,129,0.15)"
                }
              },
              {
                name: "bottom",
                value: 30,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;

          myChart.resize();
        }
      });
      ro.observe(Chart2);
    }
  }
};
</script>

<style scoped>
.header {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #1d2129;
}
.statistics-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  background: #f7f8fa;
}

.info {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
}

.unit-line {
  display: inline-block;
  width: 4px;
  height: 68px;
  background-color: #4e88f5;
  margin-right: 8px;
}
.unit-line1 {
  display: inline-block;
  width: 4px;
  height: 68px;
  background: #41b776;
  margin-right: 8px;
}

.text {
  display: flex;
  flex-direction: column;
}

.unit {
  font-size: 14px;
  color: #4e5969;
}

.number {
  font-size: 24px;
  font-weight: 400;
  color: #333;
}

.table-container {
  margin-top: 20px;
}

:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-background-color: #f5f7fa;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #f5f7fa;
}
</style>
